<template>
<!-- eslint-disable vue/no-use-v-if-with-v-for,vue/no-confusing-v-for-v-if -->
  <div>
      <div>
        <div>
          <el-upload
            action="/uploadUserFace"
            :headers="headers"
            :data="userInfo"
            :show-file-list="false"
            :on-success="onSuccess">
            <img title="点击修改头像" :src="userInfo.userFace" style="height: 100px;width: 100px;border-radius: 50px;float:left" alt="">
          </el-upload>
          <div class="bind-info">
            <i v-if="bindInfo.bindBilibili!=null" class="iconfont icon-bilibili"></i><el-link v-if="bindInfo.bindBilibili!=null" type="primary" :href="bindInfo.bindBilibili">我的B站</el-link>
            <i v-if="bindInfo.bindPhone!=null" class="iconfont icon-dianhua"></i><el-link v-if="bindInfo.bindPhone!=null" type="primary">{{bindInfo.bindPhone}}</el-link>
            <i v-if="bindInfo.bindQq!=null"  class="iconfont icon-QQ"></i><el-link v-if="bindInfo.bindQq!=null" type="primary">{{bindInfo.bindQq}}</el-link>
            <i v-if="bindInfo.bindSina!=null" class="iconfont icon-weibo"></i><el-link v-if="bindInfo.bindSina!=null" type="primary" :href="bindInfo.bindSina">我的微博</el-link>
            <i v-if="bindInfo.bindWechar!=null" class="iconfont icon-weixin"></i><el-link v-if="bindInfo.bindWechar!=null" type="primary" :href="bindInfo.bindWechar">我的微信</el-link>
          </div> 
        </div>
        
        <div>
          <el-descriptions title="">
            <el-descriptions-item label="用户名">{{userInfo.username}}</el-descriptions-item>
            <el-descriptions-item label="UID">{{userInfo.userId}}</el-descriptions-item>
            <el-descriptions-item label="性别">{{userInfo.sex}}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{userInfo.age}}</el-descriptions-item>
            <el-descriptions-item label="注册时间">{{userInfo.createDate}}</el-descriptions-item>
            <el-descriptions-item label="备注" v-if="student.stuId !=null">
              <el-tag size="small">{{student.stuSchool}}</el-tag>
              <el-tag size="small" type="warning">{{student.stuProfession}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="个人介绍" v-if="userInfo.other !=null">
              {{userInfo.other}}  
            </el-descriptions-item>            
        </el-descriptions>
       </div> 
      </div>
      <div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="我的评论" name="first">
            <div
              v-for="(item, i) in myComments"
              :key="i"
              class="myComments">
              <el-avatar class="userFace" :size="40" :src="userInfo.userFace"></el-avatar>
              <div class="author-info">
                <span class="author-name">{{ userInfo.username }}</span>
                <span class="author-time">{{ item.dateTime }}</span>
              </div>
              <div class="icon-btn">
                <span @click="showReplyInput(i, item.userInfo.username, item.topicId, item.topicType)"
                  ><i class="iconfont icon-pinglun"></i
                  >{{ item.replyCount }}</span>
                <span><i class="iconfont icon-dianzan"></i>{{ item.greatCount }}</span>
              </div>
              <div class="talk-box">
                <p>
                  <span class="reply">{{ item.content }}</span>
                </p>
              </div>
              
            </div>
          </el-tab-pane>
          <el-tab-pane label="我的关注" name="second">
            <div
            v-for="(item, i) in myFollowed"
            :key="i"
            class="myFollowed">
              <el-avatar class="followed-userFace" shape="square" :size="50" :src="item.userInfo.userFace"></el-avatar>
              <div class="followed-info">
                <span class="followed-username">{{item.userInfo.username}}</span>
                <span class="followed-time">关注时间 {{item.followTime}}</span>
              </div>
              <div class="followed-button">
                <el-button v-if="item.status==1" type="success" @click="cancelFollowed(item)">已关注</el-button>
                <el-button v-if="item.status==0" type="success" @click="addFollowed(item)">关注</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="我的粉丝" name="third">
            <div
            v-for="(item, i) in myFollewer"
            :key="i"
            v-if="item.status==1"
            class="myFollowed">
              <el-avatar class="followed-userFace" shape="square" :size="50" :src="item.userInfo.userFace"></el-avatar>
              <div class="followed-info">
                <span class="followed-username">{{item.userInfo.username}}</span>
                <span class="followed-time">关注时间 {{item.createTime}}</span>
              </div>
              <div class="followed-button">
                <el-button type="success" @click="deleteFollowed(item.follower)">移除粉丝</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane v-if="student.stuId !=null" label="学生信息" name="five">
            <div>
              <el-descriptions title="学生信息">
              <el-descriptions-item label="学生姓名">{{userInfo.username}}</el-descriptions-item>
              <el-descriptions-item label="学生学号">{{student.stuId}}</el-descriptions-item>
              <el-descriptions-item label="学校">
                <el-tag size="small">{{student.stuSchool}}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="所在专业">{{student.stuProfession}}</el-descriptions-item>
              <el-descriptions-item label="毕业时间">{{student.stuGraduateTime}}</el-descriptions-item>            
            </el-descriptions>
            <span class="stuPhotoWord">图片证明：<img class="stuPhoto" :src="student.stuPhoto"></span>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  data() {
    return {
      headers: {
        Authorization: window.sessionStorage.getItem('tokenStr')
      },
      bindInfo: '',
      userInfo: '',
      student:'',
      activeName: 'first',
      myComments: [],
      myFollowed: [],
      myFollewer: []
    }
  },
  mounted() {
    this.initUserInfo();
  },
  methods: {
    onSuccess() {
      this.initUserInfo();
    },
    deleteFollowed(followerId) {
      this.deleteRequest('/follower/deleteFollower?followerId='+followerId).then((resp) => {
        if (resp) {
          console.log(resp);
          location.reload()
        }
      })
    },
    cancelFollowed(followed) {
      console.log(followed);
      let params = {
        userId: followed.userId,
        followedUserId: followed.followeUser,
        status: 0
      }
      this.postRequest('/followed/updateFollowed',params).then((resp) => {
        if (resp) {
          console.log(resp);
          location.reload();
        }
      })
    },
    addFollowed(followed) {
      let params = {
        userId: followed.userId,
        followedUserId: followed.followeUser,
        status: 1
      }
      this.postRequest('/followed/updateFollowed',params).then((resp) => {
        if (resp) {
          console.log(resp);
          location.reload();
        }
      })
    },
    initUserInfo() {
      var result = this.getRequest('/user/info').then((resp) => {
        if (resp) {
          this.userInfo = resp;
        };
        return this.userInfo.userId;
      });
      result.then((res) => {
        this.getRequest('/stu-certification/getStuInfo?userId='+res).then((resp) =>{
          if (resp) {
            this.student = resp;
            console.log(this.student)
          }
        });
        this.getRequest('/comment/getCommentById?userId='+res).then((resp) => {
          if (resp) {
            this.myComments = resp;
            console.log(resp);
          }
        });
        this.getRequest('/user-bind/getUserBind?userId='+res).then((resp) => {
          if (resp) {
            this.bindInfo=resp;
          }
        })
      });
      this.getRequest('/followed/getFollowed').then((resp) => {
        if (resp) {
          this.myFollowed = resp;
          console.log(this.myFollowed);
        }
      });
      this.getRequest('/follower/getFollower').then((resp) => {
        if (resp) {
          this.myFollewer = resp;
          console.log(this.myFollowed);
        }
      })
    }
  }
}
</script>

<style>
.myComments:not(:last-child) {
  border-bottom: 1px solid rgba(178, 186, 194, 0.3);
}
.myComments {
  padding: 10px;
}
.myComments .userFace {
  display: inline-block;
  vertical-align: top;
}
.myComments .author-info {
  display: inline-block;
  margin-left: 5px;
  width: 60%;
  height: 40px;
  line-height: 20px;
}
.myComments .author-info > span {
  display: block;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.myComments .author-info .author-name {
  color: #000;
  font-size: 18px;
  font-weight: bold;
}
.myComments .author-info .author-time {
  font-size: 14px;
}
.myComments .icon-btn {
  width: 30%;
  padding: 0 !important;
  float: right;
}
@media screen and (max-width: 1200px) {
  .myComments .icon-btn {
    width: 20%;
    padding: 7px;
  }
}
.myComments .icon-btn > span {
  cursor: pointer;
}
.myComments .icon-btn .iconfont {
  margin: 0 5px;
}
.myComments .talk-box {
  margin: 0 50px;
}
.myComments .talk-box > p {
  margin: 0;
}
.myComments .talk-box .reply {
  font-size: 16px;
  color: #000;
}
.myComments .reply-box {
  margin: 10px 0 0 50px;
  background-color: #efefef;
}
.myFollowed {
  padding: 10px;
}
.myFollowed .followed-userFace {
  display: inline-block;
  vertical-align: top;
}
.myFollowed .followed-info {
  display: inline-block;
  margin-left: 10px;
  width: 60%;
  height: 40px;
  line-height: 20px;
}
.myFollowed .followed-button {
  width: 30%;
  padding: 0 !important;
  float: right;
}
.myFollowed .followed-info > span {
  display: block;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.myFollowed .followed-info .followed-username {
  color: #000;
  font-size: 20px;
  margin-left: 10px;
  font-weight: bold;
}
.myFollowed .followed-info .followed-time {
  color: rgb(0, 0, 0);
  margin-top: 10px;
  font-size: 18px;
}
.stuPhoto {
  display: block;
  width: 48px;
  height: 48px;
  margin-left: 72px;
  margin-top: -24px;
}
.stuPhotoWord {
  height: 24px;
  line-height: 24px;
}
.bind-info {
  margin: -100px 250px 10px 0;
  float: right;
}
</style>